<template>
  <div>
    <div v-if="state !== 'detail'" class="operation-group">
      <el-upload
        multiple
        :show-file-list="false"
        :action="uploadUrl"
        :on-success="onSuccess"
        :on-error="onError"
        :on-progress="onProgress"
        :before-upload="beforeUpload"
        :headers="headers"
        :accept="getUploadFileRules.map(n => n.toLowerCase()).join(',')"
      >
        <el-button plain type="single-number">上传附件</el-button>
      </el-upload>
    </div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        :data="fileList"
        :style="{ 'margin-top': state === 'detail' ? '41px' : 0 }"
        border
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          :show-overflow-tooltip="true"
          label="序号"
          type="index"
          min-width="20%"
          height="36px"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="fileName"
          label="文件名称"
          min-width="140%"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="fileSize"
          label="文件大小"
          min-width="70%"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="附件说明"
          min-width="70%"
        >
          <template slot-scope="{ row }">
            <span v-if="state === 'detail'">{{ row.fileDesc }}</span>
            <el-input
              v-else
              :placeholder="!row.isOperation ? '' : '请输入附件说明'"
              maxlength="100"
              v-model="row.fileDesc"
              :disabled="!row.isOperation"
            />
          </template>
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="createTime"
          label="上传时间"
          min-width="70%"
        >
          <template slot-scope="{ row }">
            <span>{{ row.createTimeStr || row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showType"
          :show-overflow-tooltip="true"
          prop="fileType"
          label="附件类型"
          min-width="70%"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="操作"
          appendixInfor.vue
          min-width="70%"
        >
          <template slot-scope="{ row, $index }">
            <!-- businessSonType  1，原合同   2，生效  3，变更  4.补充协议 -->
            <span
              v-if="state !== 'detail' && row.isOperation"
              style="color: #0089ef; cursor: pointer"
              @click="deleteAppend($index)"
              >删除</span
            >
            <span
              v-else
              style="color: #0089ef; cursor: pointer"
              @click="downLoad(row)"
              >下载</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { generateUUID } from "@/basa/utils";
import { cloneDeep } from "lodash";
import { selectByConcIdAndSonType } from "@/basa/api";
import UploadInfo from "@/basa/mixins/uploadInfo";

export default {
  name: "changeUploadInfo",
  mixins: [UploadInfo],
  model: {
    prop: "parentData",
    event: "uploadSuccess"
  },
  props: {
    showType: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    state: {
      type: String,
      default: ""
    },
    parentData: {
      type: Array,
      default: () => []
    },
    uploadBusinessType: {
      type: Number,
      default: 0
    }
  },
  data() {
    const that = this;
    return {
      selectByConcFile: {
        businessSonType: 3, // 业务子类型   2生效  3变更
        concId: that.$route.params.id, // 合同id
        businessType: that.uploadBusinessType, // 业务类型   1物资  2运输  3设备
        isShow: 1 // 1显示  0不显示
      }
    };
  },
  methods: {
    async init() {
      let supplementFileData = [];
      // 查询变更附件
      if (["edit"].includes(this.state)) {
        const { data } = await selectByConcIdAndSonType(this.selectByConcFile);
        supplementFileData = data.data.map(n => ({
          ...n,
          addFlag: 1,
          isOperation: 1
        }));
      }
      // 合并展示
      const temp = [...this.parentData, ...supplementFileData].map(n => ({
        ...n,
        onlyId: generateUUID(),
        fileSize: String(n.fileSize).endsWith("kb")
          ? n.fileSize
          : Math.round(Number(n.fileSize) / 1024) + "kb"
      }));

      this.fileList = cloneDeep(temp);
      this.uploadList = cloneDeep(temp);
    },

    onSuccess({ message, data }) {
      this.$message.success("附件上传成功");
      this.uploadLoading.close();
      let [{ uploadId, fileName, fileSize, createTime }] = data;
      const obj = {
        uploadId,
        fileName,
        createTime,
        isChangeFlag: 1, // 0=未变更 1=变更
        businessSonType: "3",
        isOperation: 1,
        addFlag: 1,
        onlyId: generateUUID(),
        fileSize: Math.round(fileSize / 1024) + "kb"
      };

      this.fileList.push(obj);
      this.uploadList.push(obj);
    },

    // 高亮行
    tableRowClassName({ row }) {
      if (this.state === "detail" && row.businessSonType === "3") {
        return "success-row";
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table {
    margin-bottom: 20px;
    width: 100%;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}

.operation-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
</style>
